<template>
  <el-container>
    <!-- 导航页头部开始 -->
    <el-header>
      <!-- 导航的黑色区域开始 -->
      <div class="app-topnav">
        <div class="container">
          <ul>
            <li>
              <a>
                <i class="el-icon-user-solid"></i>
                xiaotuxian001
              </a>
            </li>
            <li>
              <a @click="quit">退出登录</a>
            </li>
            <li @click="toOrderForm">
              <a href="#">我的订单</a>
            </li>
            <li>
              <a>会员中心</a>
            </li>
            <li>
              <a>帮助中心</a>
            </li>
            <li>
              <a>关于我们</a>
            </li>
            <li>
              <a>
                <i class="el-icon-phone"></i>
                手机版
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!-- 导航的黑色区域结束 -->

      <!-- 导航logo导航区开始 -->
      <div class="app-header">
        <div class="container">
          <h1 class="logo">
            <a aria-current="page">小兔鲜</a>
          </h1>
          <ul class="app-header-nav">
            <li>
              <a style="color: red; border-bottom: 1px solid red" @click="show"
                >首页</a
              >
            </li>

            <li
              v-for="(item, index) in result"
              :key="item.id"
              @click="onAdd(item.id)"
            >
              <a :class="{ active: index == ins }" @click="fn(index)">{{
                item.name
              }}</a>
              <div class="layer open">
                <ul>
                  <li
                    v-for="item in item.children"
                    :key="item.id"
                    @click.stop="onChange(item.id)"
                  >
                    <a>
                      <img :src="item.picture" alt="" />
                      <p>{{ item.name }}</p>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
          <div class="search">
            <i class="el-icon-search"></i
            ><input type="text" placeholder="搜一搜" />
          </div>
          <div class="cart" @click="jumpShoops">
            <div class="layer">
              <div class="list">
                <div class="item" v-for="item in jumpShoop" :key="item.id" @click.stop="jump(item.id)">
                  <a>
                    <img :src="item.picture" alt="" />
                    <div class="center">
                      <p class="name ellipsis-2">{{ item.name }}</p>
                      <p class="attr ellipsis">{{ item.attrsText }}</p>
                    </div>
                    <div class="right">
                      <p class="price">¥{{ item.price }}</p>
                      <p class="count">x{{ item.count }}</p>
                    </div>
                  </a>
                  <i class="iconfont icon-close-new"></i>
                </div>
              </div>
              <div class="foot">
                <div class="total">
                  <p>共 {{count}} 件商品</p>
                  <p>¥{{mony}}</p>
                </div>
                <button class="xtx-button ellipsis middle plain">
                  去购物车结算
                </button>
              </div>
            </div>
            <a href="#" class="curr">
              <i class="el-icon-shopping-cart-1 icon-cart"></i>
              <em>{{count}}</em>
            </a>
          </div>
        </div>
      </div>
      <!-- 导航logo导航区结束 -->

      <div
        class="app-header-sticky"
        :class="[windowHeight >= 100 ? 'show' : '']"
      >
        <div class="container">
          <h1 class="logo"></h1>
          <ul class="app-header-nav">
            <li>
              <a style="color: red; border-bottom: 1px solid red">首页</a>
            </li>
            <li
              v-for="(item, index) in result"
              :key="item.id"
              @click="onAdd(item.id)"
            >
              <a :class="{ active: index == ins }" @click="fn(index)">{{
                item.name
              }}</a>
              <div class="layer open">
                <ul>
                  <li v-for="item in item.children" :key="item.id">
                    <a @click.stop="onChange(item.id)">
                      <img :src="item.picture" alt="" />
                      <p>{{ item.name }}</p>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </el-header>
    <!-- 导航页头部结束 -->
    <el-main>
      <router-view></router-view>
    </el-main>
    <!-- 导航页主体结束 -->
    <el-footer>
      <div class="app-footer">
        <div class="contact">
          <div class="container">
            <dl>
              <dt>客户服务</dt>
              <dd><i class="iconfont el-icon-chat-dot-round"></i> 在线客服</dd>
              <dd><i class="iconfont el-icon-magic-stick"></i> 问题反馈</dd>
            </dl>
            <dl>
              <dt>关注我们</dt>
              <dd><i class="iconfont el-icon-film"></i> 公众号</dd>
              <dd><i class="iconfont el-icon-thumb"></i> 微博</dd>
            </dl>
            <dl>
              <dt>下载APP</dt>
              <dd class="qrcode">
                <img src="../../../public/lycoris recoil  icon_01.jpg" />
              </dd>
              <dd class="download">
                <span>扫描二维码</span>
                <span>立马下载APP</span>
                <a>下载页面</a>
              </dd>
            </dl>
            <dl>
              <dt>服务热线</dt>
              <dd class="hotline">
                400-0000-000
                <small>周一至周日 8:00-18:00</small>
              </dd>
            </dl>
          </div>
        </div>
        <img src="../../../public/C8GBIYWE_FZ`}QETE{@R{(1.png" alt="" />
      </div>
    </el-footer>
  </el-container>
</template>

<script>
import { log, jumpShoop } from "@/api/user";
export default {
  name: "NavGation",

  data() {
    return {
      name: 0,
      result: [], // 存入的导航渲染的数据
      ins: 0, // 存入的导航切换样式的基准
      windowHeight: 0, //实时屏幕高度,
      jumpShoop: [], // 存入导航购物车图片内的数据
      count: 0, // 存数购物车总数量
      mony:0 // 存入总价格
    };
  },
  created() {
    // 张国远 log区域请求接口
    log().then((res) => {
      this.result = res.data.result;
    });
  },

  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    // 调取购物车数据，渲染到导航右上角的购物车图标中
    jumpShoop().then((res) => {
      console.log(res.data.result);
      this.jumpShoop = res.data.result;
      this.jumpShoop.forEach((res) => {
        this.count += res.count;
        this.mony += res.price*res.count
      });
    });
  },

  methods: {
    // 导航标签切换样式
    fn(index) {
      this.ins = index;
    },
    onAdd(item) {
      this.$router.push({ path: "/NaviGation/CateGory", query: { id: item } });
    },
    handleScroll() {
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      this.windowHeight = scrollTop;
    },
    //三级路由跳转
    onChange(id) {
      this.$router.push({
        path: "/NaviGation/CateGory/CateSub",
        query: { id: id },
      });
    },
    //我的订单
    toOrderForm() {
      this.$router.push("OrderForm");
    },
    //跳转到购物车页面
    jumpShoops() {
      this.$router.push("ShopPing");
    },
    // 导航首页跳转
    show() {
      this.$router.push("/NaviGation/HomePage");
    },
    // 导航退出登录
    quit() {
      localStorage.removeItem("token");
      this.$router.push("/RegiSter");
    },
    // 导航购物车内的跳转详情
    jump(id){
      this.$router.push({path: "/NaviGation/PartiCulars",query: {id:id },});
    }
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.el-header {
  padding: 0 0 !important;
  height: 100% !important;
}
.el-card__body,
.el-main {
  padding: 0 !important;
  margin: 0 !important;
}
.el-main {
  background-color: #e9eef3;
  /* text-align: center; */
}

.app-topnav {
  background: #333;
}

.el-card__body,
.el-main {
  padding: 0 !important;
}

.container {
  width: 1240px;
  margin: 0 auto;
  position: relative;
}

.app-topnav ul {
  display: flex;
  height: 53px;
  justify-content: flex-end;
  align-items: center;
}

.app-topnav ul li a {
  padding: 0 15px;
  color: #cdcdcd;
  line-height: 1;
  display: inline-block;
}

.app-header {
  background: #fff;
}

.app-header > .container {
  display: flex;
  align-items: center;
}

.app-header .logo {
  width: 200px;
}

.app-header .logo a {
  display: block;
  height: 132px;
  width: 100%;
  text-indent: -9999px;
  background: url(http://erabbit.itheima.net/img/logo.0940ebb5.png) no-repeat
    center 18px / contain;
}

.app-header-nav {
  width: 820px;
  display: flex;
  padding-left: 30px;
  position: relative;
  z-index: 999;
}

.app-header-nav > li {
  margin-right: 40px;
  width: 38px;
  text-align: center;
}

.app-header-nav > li > a {
  font-size: 14px;
  line-height: 32px;
  height: 32px;
  display: inline-block;
}

.app-header-nav > li .active {
  color: #27ba9b;
  border-bottom: 1px solid #27ba9b;
}

.app-header-nav > li:hover > a {
  color: #27ba9b;
  border-bottom: 1px solid #27ba9b;
}

.app-header-nav .layer {
  width: 1240px;
  background-color: #fff;
  position: absolute;
  left: -200px;
  top: 56px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  box-shadow: 0 0 5px #ccc;
  transition: all 0.2s 0.1s;
}

.app-header-nav > li > a:hover + .open {
  height: 132px;
  opacity: 1;
}
.open:hover {
  height: 132px;
  opacity: 1;
}

.layer ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0 70px;
  align-items: center;
  height: 132px;
}

.layer ul li {
  width: 110px;
  text-align: center;
}

.layer ul li img {
  width: 60px;
  height: 60px;
}

img {
  vertical-align: middle;
}

.app-header .search {
  width: 170px;
  height: 32px;
  position: relative;
  border-bottom: 1px solid #e7e7e7;
  line-height: 32px;
}

.app-header .search .icon-search {
  font-size: 18px;
  margin-left: 5px;
}

.app-header .search input {
  width: 140px;
  padding-left: 5px;
  color: #666;
}

.cart {
  width: 50px;
  position: relative;
  z-index: 600;
}

.cart .curr {
  height: 32px;
  line-height: 32px;
  text-align: center;
  position: relative;
  display: block;
}

.cart .curr .icon-cart {
  font-size: 22px;
}

.cart .curr em {
  font-style: normal;
  position: absolute;
  right: 0;
  top: 0;
  padding: 1px 6px;
  line-height: 1;
  background: #e26237;
  color: #fff;
  font-size: 12px;
  border-radius: 10px;
  font-family: Arial;
}

.app-header-sticky {
  width: 100%;
  height: 80px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1px solid #e4e4e4;
  transform: translateY(-100%);
  opacity: 0;
}

.app-header-sticky .container {
  display: flex;
  align-items: center;
}

.app-header-sticky .logo {
  width: 200px;
  height: 80px;
  background: url(http://erabbit.itheima.net/img/logo.0940ebb5.png) no-repeat
    right 2px;
  background-size: 160px auto;
}

.app-header-sticky.show {
  transition: all 0.3s linear;
  transform: none;
  opacity: 1;
}

/* 页脚 */
.app-footer {
  overflow: hidden;
  background-color: #f5f5f5;
  padding-top: 20px;
}

.app-footer .contact {
  background: #fff;
}

.app-footer .contact .container {
  padding: 60px 0 40px 25px;
  display: flex;
}

.container {
  width: 1240px;
  margin: 0 auto;
  position: relative;
}

.app-footer .contact dl:first-child {
  padding-left: 0;
}

.app-footer .contact dl {
  height: 190px;
  text-align: center;
  padding: 0 58px;
  border-right: 1px solid #f2f2f2;
  color: #999;
}

.app-footer .contact dt {
  line-height: 1;
  font-size: 18px;
}

.app-footer .contact dd {
  margin: 36px 12px 0 0;
  float: left;
  width: 92px;
  height: 92px;
  padding-top: 10px;
  border: 1px solid #ededed;
}

.app-footer .contact dd:last-child {
  margin-right: 0;
}

.app-footer .contact dd .iconfont {
  font-size: 36px;
  display: block;
  color: #666;
  height: 40px;
  margin-top: 6px;
}

.app-footer .contact .qrcode {
  width: 92px;
  height: 92px;
  padding: 7px;
  border: 1px solid #ededed;
}

.app-footer .contact .download {
  padding-top: 5px;
  font-size: 14px;
  width: auto;
  height: auto;
  border: none;
}

.app-footer .contact .download span {
  display: block;
}

.app-footer .contact .download a {
  display: block;
  line-height: 1;
  padding: 10px 25px;
  margin-top: 5px;
  color: #fff;
  border-radius: 2px;
  background-color: #27ba9b;
}

.app-footer .contact .hotline {
  padding-top: 20px;
  font-size: 22px;
  color: #666;
  width: auto;
  height: auto;
  border: none;
}

.app-footer .contact .hotline small {
  display: block;
  font-size: 15px;
  color: #999;
}

img {
  max-width: 100%;
  max-height: 100%;
}

.cart .layer {
  opacity: 0;
  transition: all 0.4s 0.2s;
  transform: translateY(-200px) scaleY(0);
  width: 400px;
  height: 400px;
  position: absolute;
  top: 50px;
  right: 0;
  box-shadow: 0 0 10px rgb(0 0 0 / 20%);
  background: #fff;
  border-radius: 4px;
  padding-top: 10px;
}

.cart:hover .layer {
  transform: translateY(0px) scaleY(100%);
  opacity: 1;
}

.cart .layer:before {
  content: "";
  position: absolute;
  right: 14px;
  top: -10px;
  width: 20px;
  height: 20px;
  background: #fff;
  transform: scaleX(0.6) rotate(45deg);
  box-shadow: -3px -3px 5px rgb(0 0 0 / 10%);
}

.cart .list {
  height: 310px;
  overflow: auto;
  padding: 0 10px;
}

.cart .list .item {
  border-bottom: 1px solid #f5f5f5;
  padding: 10px 0;
  position: relative;
}

.cart .list .item a {
  display: flex;
  align-items: center;
}

.cart .list .item a img {
  height: 80px;
  width: 80px;
}

.cart .list .item a .center {
  padding: 0 10px;
  width: 200px;
}

.cart .list .item a .center .name {
  font-size: 16px;
}

.cart .list .item a .center .attr {
  color: #999;
  padding-top: 5px;
}

.cart .list .item a .right {
  width: 100px;
  padding-right: 20px;
  text-align: center;
}

.cart .list .item a .right .price {
  font-size: 16px;
  color: #cf4444;
}

.cart .list .item a .right .count {
  color: #999;
  margin-top: 5px;
  font-size: 16px;
}

.cart .list .item i {
  position: absolute;
  bottom: 38px;
  right: 0;
  opacity: 0;
  color: #666;
  transition: all 0.5s;
}

.cart .layer .foot {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 70px;
  width: 100%;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  background: #f8f8f8;
  align-items: center;
}

.cart .layer .foot .total {
  padding-left: 10px;
  color: #999;
}

.cart .layer .foot .total p:last-child {
  font-size: 18px;
  color: #cf4444;
}

.plain {
  border-color: #27ba9b;
  color: #27ba9b;
  background: #e6faf6;
}

.middle {
  width: 180px;
  height: 50px;
  font-size: 16px;
}
.xtx-button {
  appearance: none;
  outline: none;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
</style>